import React, { Component } from "react"
import  { Link } from 'react-router'
import fetchData from '../../util/fetch'
import { Tabs, Carousel, Row, Col, Modal, Input, Button, Form, message, DatePicker } from 'antd'
const TabPane = Tabs.TabPane;
import { getUrl } from '../../util/function'
import moment from 'moment'
const FormItem = Form.Item;


class Activity extends Component {
	constructor(props) {
		super(props)
		this.state = {
			homelist: [],
			banner: null,
			newsData: null,//新闻动态
			newsList: null,//新闻列表
			activityRecruit: null,//活动招募
			activityRecruitList: null,//活动招募列表
			activityRecruitPageIndex: 0,
			momAndBabyKnowledge: null,//母婴知识
			momAndBabyKnowledgeList: null,//母婴知识列表
			momAndBabyKnowledgePageIndex: 0,
			momCourse: null,//妈妈课程,
			momCourseData: null,//妈妈课程列表
			defKey: '1',
			visible: false
		}
	}
	
	callback(key) {
		console.log(key);
	}
	
	getData(url, opts) { // 请求后台数据
		fetchData(url, opts, function (res) {
			let data = eval(res.data)
			switch (opts.str) {
				case '4-1':
					this.setState({
						newsData: data
					});
					break;
				case '4-1-1':
					console.log("新闻列表", data);
					this.setState({
						newsList: data
					});
					break;
				case '4-2':
					this.setState({
						activityRecruit: data
					});
					break;
				case '4-2-1':
					console.log("活动招募列表", data);
					this.setState({
						activityRecruitList: data
					});
					break;
				case '4-3':
					this.setState({
						momAndBabyKnowledge: data
					});
					break;
				case '4-3-1':
					console.log("母婴知识列表", data);
					this.momAndBabyKnowledgePageTotal = Math.ceil(data ? data.length / 4 : 0);
					this.setState({
						momAndBabyKnowledgeList: data
					});
					break;
				case '4-4':
					this.setState({
						momCourse: data
					});
					break;
			}
		}.bind(this))
	}
	
	getBannerData(url, opts) {// 请求banner图
		fetchData(url, opts, function (res) {
			let data = eval(res.data);
			this.setState({
				banner: data
			});
		}.bind(this));
	}
	
	getMomCourseData(url, opts) { 
		fetchData(url, opts, function (res) {
			let data = eval(res.data);
			this.setState({
				momCourseData: data
			});
		}.bind(this));
	}
	
	componentDidMount() {
		// this.setState({
		// 	defKey: this.props.params.defKey
		// })
		//banner类型 1首页、2hibaby服务、3美研中心、4活动咨询、5新妈分享、6关于Hibaby
		this.getBannerData('/crm/api/v1/web/banner/findOneByType', { "dataId": 4 });
		// 4-1	新闻动态
		this.getData('/crm/api/v1/web/news/findOneByType', { "str": "4-1" });
		// 4-1-1	新闻动态列表
		this.getData('/crm/api/v1/web/news/findListByType', { "str": "4-1-1" });
		// 4-2	活动招募
		this.getData('/crm/api/v1/web/news/findOneByType', { "str": "4-2" });
		// 4-2-1	活动招募列表
		this.getData('/crm/api/v1/web/news/findListByType', { "str": "4-2-1" });
		// 4-3	母婴知识
		this.getData('/crm/api/v1/web/news/findOneByType', { "str": "4-3" });
		// 4-3-1	母婴知识列表
		this.getData('/crm/api/v1/web/news/findListByType', { "str": "4-3-1" });
		// 4-4	妈妈课程
		this.getData('/crm/api/v1/web/news/findOneByType', { "str": "4-4" });
		//获取妈妈课程列表
		this.getMomCourseData('/crm/api/v1/web/webCourse/list', null);
	}
	
	
	initNewsList() {
		let { newsList } = this.state;
		let newsHtml = [];
		if (!newsList || newsList.length == 0) {
			return null;
		} else {
			for (let i = 0; i < newsList.length; i++) {
				if (i < 8) {
					newsHtml.push(
						<div className="News-List">
							<Link className="newsHover" to={`/detail#id=${newsList[i].id}`} key={i}>{newsList[i].title}</Link>
							<div className="NewsTitle">
								<p className="NewSummary">{newsList[i].summary}</p>
							</div>
						</div>
					)
				} else {
					break;
				}
			}
			return (
				<div className="activityNewsRight">
					{newsHtml}
					<Link to="/activityDetail" className="more"><span >MORE+</span></Link>
				</div>
			)
		}
	}
	
	renderItems(item, type) {
		let DataItem = [];
		let settings = {
			infinite: true,
			slidesToShow: 3,
			slidesToScroll: 1,
			autoplay: true,
			arrows: true,
			speed: 300,
			dots: false,
			variableWidth: true
		}
		if (!item || item.length == 0) {
			return null;
		} else {
			return (
				<div className="tabImg-Box activityTabBox">
					<Carousel {...settings}>
						{DataItem = item.map((val, i) => {
							return (
								<Link to={type ? `/detail?id=${val.id}&type=1` : `/detail?id=${val.id}`}>
									<img src={val.img1Url}/>
									<p>{val.title}</p>
								</Link>
							)
						})}
					</Carousel>
				</div>
			)
		}
	}
	
	initMomCourse = () => {
		const { momCourseData } = this.state;
		const show = (item) => {
			this.setState({
				visible: true,
				name: item.name,
				webCourseId: item.id
			})
		}
		const vipData = [];
		const commonData = [];
		if (momCourseData && momCourseData.length > 0) {
			momCourseData.map(function (item, index) {
				let time = moment(item.courseTime)
				
				const data = (
					<Row className="titleActivity noBg">
						<Col className="themeActivity" span={2}>{item.name}</Col>
						<Col className="speakerActivity" span={2}>{item.lecturer}</Col>
						<Col className="timerActivity" span={2}>{time.format('YYYY-MM-DD')}</Col>
						<Col className="weekActivity" span={2}></Col>
						<Col className="localtionrActivity" span={2}>{item.address}</Col>
						<Col className="peopleActivity" span={2}>{item.crowd}</Col>
						<Col className="peopleNumActivity" span={2}>{item.number}</Col>
						<Col className="applyActivity" span={2}>
							<Link
								onClick={() => {show(item)}}>
								报名
							</Link>
						</Col>
					</Row>
				);
				if (item.type === 1) {
					vipData.push(data);
				} else {
					commonData.push(data);
				}
			});
		}
		return (
			<div className="activeLesson">
				<Row className="memberActivity">
					<Col span={2} className="memberActivityTitle">
						<div>会员活动</div>
					</Col>
					<Col span={20}>
						<Row className="titleActivity">
							<Col className="themeActivity" span={2}>活动主题</Col>
							<Col className="speakerActivity" span={2}>主讲人</Col>
							<Col className="timerActivity" span={2}>时间</Col>
							<Col className="weekActivity" span={2}>星期</Col>
							<Col className="localtionrActivity" span={2}>地点</Col>
							<Col className="peopleActivity" span={2}>适用人群</Col>
							<Col className="peopleNumActivity" span={2}>人数限制</Col>
							<Col className="applyActivity" span={2}>报名</Col>
						</Row>
						{vipData}
					</Col>
				</Row>
				<Row className="activeLessonCenter">
					
					<Col span={40}>
						<div>以上课程，会员可免费参加，非会员需缴纳听课费300元/人次</div>
					</Col>
				</Row>
				<Row className="memberActivity">
					<Col span={2} className="memberActivityTitle">
						<div>常规课程</div>
					</Col>
					<Col span={20}>
						{commonData}
					</Col>
				</Row>
			</div>
		);
	}
	
	
	handleSubmit = (e) => {
		const { webCourseId } = this.state
		e.preventDefault();
		this.props.form.validateFields((err, values) => {
			const rangeValue = values['produceTime'].format('YYYY-MM-DD');
			values.produceTime = rangeValue;
			if (!err) {
				let _this = this;
				fetch('/crm/api/v1/web/webApply/add', {
					method: 'POST',
					headers: { 'Content-Type': 'application/json' },
					body: JSON.stringify({ ...values, webCourseId, type: 2 })
				}).then(function (res) {
					const { ok } = res;
					if (ok) {
						message.success("提交成功")
						_this.setState({
							visible: false
						});
					} else {
						message.error("保存错误");
					}
				})
			}
		})
	}
	handleOk = (e) => {
		console.log(e);
		this.setState({
			visible: false
		});
	}
	handleCancel = (e) => {
		console.log(e);
		this.setState({
			visible: false
		});
	}
	
	
	render() {
		const defKey = this.props.params.defKey;
		const layout = {
			colSpan: 5
		}
		const { getFieldDecorator } = this.props.form;
		const formItemLayout = {
			labelCol: { span: 5 },
			wrapperCol: { span: 18 }
		};
		return (
			<div className="activity">
				<Modal
					title={
						<div className="ModalTile ">
							<h3>活动报名表</h3>
							<p>请填妥以下孕产信息，我们的客服人员将尽快为您安排</p>
						</div>
					}
					key={this.state.visible}
					maskClosable={true}
					closable={true}
					style={{ width: '980px', margin: '0 auto' }}
					onCancel={ this.handleCancel.bind(this) }
					onOk={ this.handleOk.bind(this) }
					visible={this.state.visible}
					wrapClassName={"vertical-center-modal detailModal"}
				>
					<Form>
						<FormItem {...formItemLayout} label="孕妇姓名">
							{getFieldDecorator('name', {
								rules: [{ required: true, message: '请输入姓名' }]
							})(
								<Input />
							)}
						</FormItem>
						<FormItem {...formItemLayout} label="联系方式">
							{getFieldDecorator('phone', {
								rules: [{
									required: true,
									pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
									message: '请输入正确的手机号'
								}]
							})(
								<Input />
							)}
						</FormItem>
						<FormItem {...formItemLayout} label="预产期">
							{getFieldDecorator('produceTime', {
								rules: [{ required: false, message: '请输入预产期' }]
							})(
								<DatePicker />
							)}
						</FormItem>
						<FormItem {...formItemLayout} label="参加人数">
							{getFieldDecorator('number', {
								rules: [{ required: false, message: '请输入参加人数' }]
							})(
								<Input />
							)}
						</FormItem>
						<FormItem {...formItemLayout} label="停  车">
							{getFieldDecorator('parking', {
								rules: [{ required: false, message: '' }]
							})(
								<Input />
							)}
						</FormItem>
						<FormItem {...formItemLayout} label="试吃月子餐">
							<Input value={this.state.name ? this.state.name : ""}/>
						</FormItem>
						<FormItem {...formItemLayout} label="预约门店">
							{getFieldDecorator('store', {
								rules: [{ required: false, message: '' }]
							})(
								<Input />
							)}
						</FormItem>
						<Button onClick={this.handleSubmit.bind(this)}>确认报名</Button>
					</Form>
				</Modal>
				
				
				<div className="activity-banner"><img src={this.state.banner ? this.state.banner.imgUrl : ''}/></div>
				<div className="activity-content tab">
					<Tabs defaultActiveKey={defKey} key={defKey} type="card" onChange={this.callback.bind(this)}>
						<TabPane tab={
							<Link to='/activity/1'>{this.state.newsData ? this.state.newsData.title : '新闻动态'}</Link>}
						         key="1">
							<div className="tabImg-Box activityTabBox NewsBox">
								<div className="activityNewsLeft">
									<img src={this.state.newsData ? this.state.newsData.img1Url : ''}/>
								</div>
								{this.initNewsList()}
							</div>
						</TabPane>
						<TabPane tab={
							<Link to='/activity/2'>{this.state.activityRecruit ? this.state.activityRecruit.title : '活动招募'}</Link>} key="2">
							{this.renderItems(this.state.activityRecruitList, true)}
						</TabPane>
						<TabPane tab={
							<Link to='/activity/3'>{this.state.momAndBabyKnowledge ? this.state.momAndBabyKnowledge.title : '母婴知识'}</Link>} key="3">
							{this.renderItems(this.state.momAndBabyKnowledgeList, false)}
						</TabPane>
						<TabPane tab={
							<Link to='/activity/4'>{this.state.momCourse ? this.state.momCourse.title : '妈妈课程'}</Link>} key="4">
							<h3>{this.state.momCourse ? this.state.momCourse.summary : ''}</h3>
							{this.initMomCourse()}
							{/*<p>
							 <img src={this.state.momCourse ? this.state.momCourse.img1Url : null}/>
							 </p>*/}
						</TabPane>
					</Tabs>
				</div>
			</div>
		)
	}
}

export default  Form.create()(Activity) ;
